<template>
  <div v-if="props.descriptionsList && props.descriptionsList.length" class="df-descriptions">
    <n-descriptions
      class="basic-descriptions"
      label-placement="left"
      label-align="right"
      :column="column"
    >

      <n-descriptions-item
        v-for="(item, key) in props.descriptionsList"
        :key="key"
        :label="
          item.title ||
          (getLabelForm === 'table'
            ? getTableLabelFn(item, routeName)
            : getFormLabelFn(item, routeName))
        "
        :label-style="`position: absolute;display: inline-block;text-align: right;width:${labelWidth}px; color: #A4AAB2;`"
        :content-style="`padding-left:${labelWidth}px;`"
        :span="item.span || 1"
      >
        <!-- 自定义标签插槽 -->
        <template v-if="item.slotLabelName" #label>
          <slot :name="item.slotLabelName"></slot>
        </template>
        <!-- 自定义值插槽 -->
        <template v-if="item.slotValueName" #default>
          <slot :name="item.slotValueName" :model="item"></slot>
        </template>
        <!-- {{ item }} -->
        <span :class="{ 'wrap-text': !!item.wrapText }">
          {{ !['', null, undefined].includes(item.value) ? item.value : '-' }}</span
        >
      </n-descriptions-item>
    </n-descriptions>
  </div>
</template>
<script lang="ts" setup name="DFDescriptions">
  // import { downLoadFile } from '@/api/basicConfiguration/deviceInfo';
  import { useMixins } from '@/hooks/useMixins';

  const { getTableLabelFn, getFormLabelFn } = useMixins();
  // tab标签
  type Props = {
    routeName?: String;
    labelWidth?: number;
    column?: number; // 列数
    getLabelForm?: String; //标签文字国际化传参
    descriptionsList?: any;
  };

  const props = withDefaults(defineProps<Props>(), {
    routeName: () => '',
    column: () => 3,
    labelWidth: () => 75,
    getLabelForm: () => 'table',
    descriptionsList: () => [],
  });

  // const downFile = (file) => {
  //   console.log(file);

  //   downLoadFile({
  //     fileUrl: file.fileUrl,
  //     fileName: `${file.fileName}.${file.fileType}`,
  //   }).catch((err) => {
  //     console.log('downloadErr', err);
  //   });
  // };
</script>

<style lang="less" scoped>
  .df-descriptions {
    position: relative;
    padding-bottom: 12px;

    /deep/ .n-descriptions-table-content__content{
      width: 100%;
      .n-upload-trigger.n-upload-trigger--image-card{
        display: none;
      }
      .n-button--medium-type:nth-of-type(2){
        display: none;
      }
    }
  }

  .basicInfo-header {
    margin-bottom: 16px;
  }

  .remark {
    width: 90%;
  }

  .wrap-text {
    white-space: pre-wrap;
  }

  :deep(
      .basic-descriptions.n-descriptions
        .n-descriptions-table-wrapper
        .n-descriptions-table
        .n-descriptions-table-row
        .n-descriptions-table-content
    ) {
    width: 33.3333%;
    padding-right: 16px;
  }

  // .file-list {
  //   background: #fff;

  //   .file-item {
  //     background: #fff;
  //     padding: 0 !important;
  //     margin: -4px 40px 0 0;
  //   }
  //   a {
  //     color: #1d6eff;

  //     display: inline-block;
  //     max-width: 200px;
  //     overflow: hidden;
  //     white-space: nowrap;
  //     text-overflow: ellipsis;
  //     vertical-align: bottom;

  //     &:hover {
  //       text-decoration: underline;
  //     }
  //     .n-icon {
  //       color: #1d6eff;
  //       font-size: 16px;
  //       margin-top: -2px;
  //     }
  //     .fujian {
  //       margin-top: -2px;
  //       font-size: 16px;
  //     }
  //   }
  // }
</style>
